<!--
 * @Author: zjf
 * @Date: 2023-06-27 18:29:30
 * @LastEditors: zjf
 * @LastEditTime: 2023-08-11 11:26:07
 * @Description: 
-->
<template>
  <div class="map-tools-item">
    <template v-for="item in list">
      <div class="tool-item" :key="item.id" :class="{'is-active': item.active}" @click="drawClick(item)">
        <img class="tool-item-icon" :class="item.id" :src="item.icon" alt="">
        <span>{{item.title}}</span>
      </div>
    </template>
  </div>
</template>

<script>
import { MapToolsDrawGeometryService } from "@/core/util/draw";
import * as wellknown from "wellknown";
export default {
  props: ['map'],
  data() {
    return {
      list: [
        {
          id: 'polygon', // draw_polygon
          title: '绘制',
          icon: `${this.rootUrl}img/map/draw/btn-polygon-blue.png`,
          active: false,
          type: 'polygon',
          desp: '多边形绘制'
        },
        {
          id: 'clear',
          title: '清除',
          icon: `${this.rootUrl}img/map/draw/btn-clear-blue.png`,
          active: false,
          desp: '清空绘制内容'
        },
        {
          id: 'save',
          title: '保存',
          icon: `${this.rootUrl}img/map/map_icon_guanlian_sel.png`,
          active: false,
          desp: '保存绘制内容'
        },

      ],
      startDraw: false,
      currentSelect: null,
      timer: null,
      drawServiceObj: null,
      wktInfo: {},
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.initDrawServiceObj()
    },

    /** 实例化绘制对象 */
    initDrawServiceObj() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.map) {
        this.drawServiceObj = new MapToolsDrawGeometryService(this.map);
      } else {
        this.timer = setTimeout(() => {
          this.initDrawServiceObj();
        }, 100);
      }
    },

    /** 执行绘制操作 */
    drawClick(item) {
      switch (item.id) {
        case 'clear':
          this.wktInfo = {}
          this.startDraw = false;
          this.currentSelect = null;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
          this.map.getCanvas().style.cursor = '';
          break;
        case 'polygon':
          this.startDraw = true;
          this.currentSelect = item.id;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
          this.drawServiceObj && this.drawServiceObj.draw(item.id, (geoJson) => {
            this.wktInfo = {
              wkt: wellknown.stringify(geoJson)
            };
          });
          break;
        case 'save':
          // if (this.wktInfo.wkt) {
          this.$emit('save', this.wktInfo)
          this.startDraw = false;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
          // } else {
          //   this.$message({
          //     type: 'info',
          //     message: this.$t('当前空间信息为空!')
          //   })
          // }
          break;
        default:
          this.wktInfo = {}
          this.startDraw = false;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
      }
    },


  }
};
</script>
<style lang="scss" scoped>
.map-tools-item {
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 10px;
  .tool-item {
    width: 88px;
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid #fff;
    cursor: pointer;
    img {
      width: 25px;
      height: 25px;
      &.clear,
      &.save {
        width: 18px;
        height: 18px;
      }
    }
    &.is-active,
    &:hover {
      color: #39f;
    }
  }
  .tool-item + .tool-item {
    border-left: 1px solid rgb(202, 202, 202);
  }
}
</style>